<template>
  <!-- 
    isShowAttrList 为 true，代表要渲染 AttrList 组件，此时 CategorySelector 不禁用。需要false
    isShowAttrList 为 false，代表要渲染 SaveOrUpdateAttr 组件，此时 CategorySelector 禁用。需要true
  -->
  <CategorySelector :disabled="!isShowAttrList" />
  <!-- 
    需求：AttrList和SaveOrUpdateAttr切换显示，有且只显示一个
      v-if
      v-show
   -->
  <AttrList v-if="isShowAttrList" @setIsShowAttrList="isShowAttrList = $event" @setAttr="attr = $event" />
  <SaveOrUpdateAttr v-else @setIsShowAttrList="isShowAttrList = $event" @setAttr="attr = $event" :attr="attr" />
</template>

<script lang="ts">
export default {
  name: "XAttr",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import CategorySelector from "@/components/CategorySelector/index.vue";
import AttrList from "./components/AttrList.vue";
import SaveOrUpdateAttr from "./components/SaveOrUpdateAttr.vue";
import type { SaveAttrItem } from "@/api/product/model/attrModel";

const isShowAttrList = ref(true);
const attr = ref<SaveAttrItem>({
  attrName: "",
  attrValueList: [],
});
</script>

<style scoped></style>
